<template>
	<div>
		<div class="headerbox">
			<!-- 导航栏 -->
			<van-nav-bar
                :title="info.name"
				fixed
				left-text="返回"
				left-arrow
				@click-left="ckLeft"
				@click-right="share">
				<template #right>
					<van-icon name="share-o" />
				</template>
			</van-nav-bar>
		</div>
		<div class="clear"></div>
		<div class="h50"></div>
		<div class="clear"></div>
		<div class="aui-m-slider">
			<van-swipe
				class="my-swipe"
				:autoplay="3000"
				style="height: 210px"
				indicator-color="white">
				<van-swipe-item
					v-for="swipers in info.swiper_text"
					:key="swipers">
					<img :src="swipers" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="clear"></div>
		<div class="detailbox">
			<h1 class="h4">{{ info.name }}</h1>
			<h4>{{ info.prop }}</h4>
			<div class="price"><em>￥</em>{{ info.price }}<font>已售500件</font></div>
		</div>
		<div class="clear"></div>
		<div class="allkbox"></div>
		<div class="clear"></div>
		<div class="detailbox_2">
			<p class="tit">产品介紹:</p>
			<div v-html="info.content"></div>
		</div>

		<!-- 底部導航l -->
		<van-action-bar>
			<van-action-bar-icon icon="chat-o" text="客服" @click="tel" />
			
			<van-action-bar-icon
				icon="cart-o"
				text="购物车"
				:badge="num"
				@click="goShopCar" />
			<van-action-bar-button
				type="warning"
				text="加入购物车"
				@click="addShop" />
			<van-action-bar-button
				type="danger"
				text="立即购买"
				@click="buyShop" />
		</van-action-bar>

		<!-- 分享页面 -->
		<van-share-sheet
			v-model:show="showBottom"
			title="立即分享给好友"
			:options="options" />

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { showConfirmDialog, showFailToast } from "vant";
	export default {
		created() {
			this.shopinfo(this.$route.query.proid);
		},
		data() {
			return {
				info: {},
				showBottom: false,
				num: null,
				options: [
					[
						{ name: "微信", icon: "wechat" },
						{ name: "朋友圈", icon: "wechat-moments" },
						{ name: "微博", icon: "weibo" },
						{ name: "QQ", icon: "qq" },
					],
					[
						{ name: "复制链接", icon: "link" },
						{ name: "分享海报", icon: "poster" },
						{ name: "二维码", icon: "qrcode" },
						{ name: "小程序码", icon: "weapp-qrcode" },
					],
				],
				isLoading: false
			};
		},
		methods: {
			// 商品详情数据请求
			async shopinfo(id) {
				this.isLoading = true;
				let res = await this.$api.ShopInfo({ id, busid: this.$cookies.get('User').id });
                if (res.code == 1) {
					this.info = res.data[0];
					this.num = res.data[1];
                }
				this.isLoading = false;
			},
			ckLeft() {
				this.$router.go(-1);
			},
			// 分享面板显示
			share() {
				if (this.showBottom) {
					this.showBottom = false;
				} else {
					this.showBottom = true;
				}
			},
			// 点击购物车跳转
			goShopCar() {
				this.$router.push('/shopcart');
			},
			// 添加到购物车
			async addShop() {
                if (this.$cookies.get('User') == null) {
                    this.$router.push('/business/login');
                    return;
                }
				this.isLoading = true;
                let res = await this.$api.AddShop({ busid: this.$cookies.get('User').id, proid: this.info.id });

                if (res.code == 1) {
                    showConfirmDialog({
                        title: "添加成功",
                        message: "商品添加成功,是否去购物车"
                    }).then(() => {
                        this.$router.push('/shopcart');
                    });
					this.shopinfo(this.$route.query.proid);
                }else{
                    showFailToast({
                        message: res.msg
                    });
                }
				this.isLoading = false;
			},
			tel(){
				window.location.href= 'tel://123456789';
			},
			async buyShop(){
				this.$router.push({ path: "/shopcart/buy", query: { shopId: this.$route.query.proid } });

				// let res = await this.$api.SubStock();
				// if (res.code == 1) {
				// 	this.$router.push({ path: "/shopcart/buy", query: { shopId: this.$route.query.proid } });
				// }else{
				// 	showFailToast({
				// 		message: res.msg
				// 	});
				// }
			}
		},
	};
</script>

<style scoped>
	.my-swipe img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.h4 {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.top {
		width: 20% !important;
		margin: 0 auto;
	}

	.tel{
		width: 40px;
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tel > a{
		width: 18px;
		height: 18px;
	}

	.tel > a > i,
	.tel > a > i::before{
		width: 100%;
		height: 100%;
	}
</style>
